<script setup lang="ts">
import { ref } from 'vue'

// 弹层的引用
// 和弹框建立链接
// 调用他的方法
// open 打开
// close 关闭
const popupRef = ref()

// 点击蒙层
const onMaskClick = () => {
  console.log('蒙层点击了...')
  popupRef.value.close()
}

// 打开弹层
const openPopup = () => {
  popupRef.value.open()
}

// 关闭弹层
const closePopup = () => {
  popupRef.value.close()
}

// 点击按钮
const clickButton = () => {
  // 找到弹层，调用 close
  popupRef.value.close()
}
</script>

<template>
  <view class="test-page">
    <view class="popup-demo">
      <button @click="openPopup" class="button" type="primary">打开弹层</button>
      <button @click="closePopup" class="button" type="primary">关闭弹层</button>
    </view>

    <!-- 弹框 -->
    <uni-popup ref="popupRef" @maskClick="onMaskClick" :is-mask-click="false" type="bottom">
      <!-- 插槽 -->
      <view class="popup-container">
        <view>我是盒子 1</view>
        <view>我是盒子 2</view>
        <button @click="clickButton">我是按钮</button>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.popup-demo {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0;

  .button {
    width: 300rpx;
    margin: 0;
  }
}

.popup-container {
  height: 400rpx;
  background-color: #fff;
}
</style>
